<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    @media(max-width: 576px) {
      .zdy-dh {
        height: 60px;
        font-size: 6px;
      }

      .dyk-pic>img {
        width: 110px;
      }
      .wjdp-pic img{
        width: 70%;
        margin-left: 80px;
      }
      .yw p,.yw a{
        font-size: 12px;
      }
      .navbar img{
        
        width: 37px !important;
        height: 37px !important; ;
      }
    }

    @media(min-width: 576px) {
      .zdy-dh {
        height: 60px;
        font-size: 12px;
      }

      .dyk-pic>img {
        width: 120px;
      }
      .wjdp-pic img{
        width: 80%;
        margin-left: 50px;
      }
      .yw p,.yw a{
        font-size: 12px;
      }
    }

    @media(min-width: 768px) {
      .zdy-dh {
        height: 60px;
        font-size: 16px;
      }

      .dyk-pic img {
        width: 150px;
      }
      .wjdp-pic img{
        width: 80%;
        margin-left: 70px;
      }
    }

    @media(min-width: 992px) {
      .dyk-pic img {
        width: 280px;
      }


      .wjdp-pic img{
        width: 80%;
        margin-left: 90px;
      }
    }
 
    @media(min-width: 1200px) {
      .bs-index .dyk-pic>img {
        width: 285px;
        height: 411px;
      }

      .wjdp-pic {
        width: 1000px;
      }

      .wjdp-pic {
        width: 100%;
        margin-left: 60px;
      }
    }

    .navbar {
      margin: 0;
      padding: 0;
    }

    .nav ul {
      list-style: none;
      height: 60px;
      color: #000;
      margin: 0;

    }

    .nav ul>li {
      position: relative;
      float: left;
      text-align: center;
      line-height: 50px;

    }

    .navbar img {
      width: 49px;
      height: 52px;
      /* top:50%; */
      /* transform: translateY(10px); */
    }

    .baba {
      position: relative;
    }

    .baba:hover .xlcd {
      display: block;
    }

    .xlcd {
      width: 100px;
      padding: 0;
      margin: 0;
      list-style: none;
      background-color: rgba(100, 100, 100, 0.6);
      display: none;
      position: absolute;
      top: 50px;
      left: 0px;
      z-index: 9999;

    }

    .zdy-dh ul li a {
      color: black;
    }
  </style>
</head>

<body>

  <!-- 导航 -->
  <div class="bs-dh">
    <div class="container  ">
      <div class="navbar  navbar-light d-flex">
        <div class="bs-log"><a href="#"><img src="./img/cropped-图层-27-1.png" alt=""></a></div>
        <div class="nav  zdy-dh ">
          <ul class="clearfix">
            <li>
              <a href="#" class="nav-item nav-link">首页</a>
            </li>
            <li class="baba">
              <a href="#" class="nav-item nav-link">万家优选</a>
              <ol class="xlcd">
                <li>优-鲜果</li>
                <li>优-零食</li>
                <li>选-粮油</li>
                <li>选-茶酒</li>
              </ol>
            </li>
            <li class="baba">
              <a href="#" class="nav-item nav-link">食在当季</a>
              <ol class="xlcd">
                <li>优-当季</li>
                <li>优-礼盒</li>
                <li>选-特色</li>
                <li>选-特惠</li>
              </ol>
            </li>
            <li class="baba">
              <a href="#" class="nav-item nav-link">万家店铺</a>
              <ol class="xlcd">
                <li>线上商城</li>
                <li>线下门店</li>
              </ol>
            </li>
            <li class="baba">
              <a href="#" class="nav-item nav-link">合作共赢</a>
              <ol class="xlcd">
                <li>商城介绍</li>
                <li>联系我们</li>
              </ol>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="xz-lb">
    
      <!-- 最外层父级 -->
      <div class="carousel slide" id="banner" data-ride="carousel">
        <!-- 展示的图区域 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/e8cb3e1ac2ea913384db3c934998690.png" alt="" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/e909a0f16334920c38b7e4a80272de5.png" alt="" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/c046e7d9ece61e7d945fc4ff6ecca5f.png" alt="" class="d-block w-100">
          </div>
          
        </div>
  
  </div>
<!--  -->
  <div class="bs-xt">
    <div class="container">
      <div class="mb-3 text-left  ">
        <img src="./img/万家优选.png" alt="" width="147px" height="38px">
      </div>
      <div class="mb-3 text-right ">
        <img src="./img/more.png" alt="" width="72px" height="15px">
      </div>
    </div>
  </div>
  <div class="bs-index">
    <div class="container">
      <!-- 第一大块 -->
      <div class="h-100 position-relative dyk-pic d-flex justify-content-between">
        <img src="./img/11111-235x300.png" alt="" class="mr-2">
        <img src="./img/22222222222-235x300.png" alt="" class="mr-2">
        <img src="./img/3333333333333-234x300.png" alt="" class="mr-2">
        <img src="./img/44444444444-235x300.png" alt="" class="mr-2">
      </div>
    </div>
  </div>
  <div>
    <div class="container wjdp">
      <div class="mb-3 text-left mt-3">
        <img src="./img/33333333333.png" alt="" width="147px" height="38px">
      </div>
      <div class="wjdp-pic">
        <img src="./img/bashan4-1024x199.png" alt="">
        <img src="./img/665555555-1024x254.png" alt="">
      </div>

    </div>
  </div>
  <div style="background-color: rgba(0, 0, 0, 0.6);" class="mt-5">
    <div class="container yw">
      <div class="d-flex justify-content-center"><p style="color:white;">© All right reserved 2016</p></div>
      <div class="d-flex justify-content-center"><a href="#" style="color:white;">Proudly powered by WordPress</a><p style="color:white;">| Theme: Corporate Plus by</p><a href="#" style="color:white;"> Acme Themes</a></div>
    </div>
  </div>
</body>

</html>